@import "~@/styles/variables.scss";
@import "~@/styles/mixins/mixins.scss";

$light_gray:#eee;
$cursor: #fff;
$dark_gray:#889aa4;
@include  b(login) {
  background-color: #2d3a4b;
  min-height: 100%;
  display: flex;
  justify-content: center;

  @include e(main) {
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
  }

  @include e(title) {
    font-size: 26px;
    color: #eee;
    margin: 0 auto 40px auto;
    text-align: center;
    font-weight: bold;
  }

  @include e(btn) {
    width: 100%;
    margin-bottom:30px;
  }

  @include e(svg-container){
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  @include e(input){
    display: inline-block;
    height: 48px;
    width: 85%;
    input {
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 0;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 48px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px #283443 inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  @include e(form-item){
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }

  @include e(show-pwd){
    vertical-align: middle;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
